<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 400px;
				height: 400px;
				border: 1px solid red;
				position: relative;
			}
			.disktop{
				width: 150px;
				height: 150px;
				background-color: #005FA4;
				position: absolute;
				border-radius: 50%;
				top: 125px;
				left: 125px;
			}
			.box .item{
				position: absolute;
				width: 50px;
				height: 50px;
				border: 1px solid #005FA4;
				border-radius: 50%;
			}
			#item1{
				top: 40px;
				left: 152px;
			}
			#item2{
				top: 50px;
				left: 217px;
			}
			#item3{
				top: 84px;
				left: 273px;
			}
			#item4{
				top: 137px;
				left: 306px;
			}
			#item5{
				top: 268px;
				left: 301px;
			}
			#item6{
				top: 323px;
				left: 252px;
			}
			#item7{
				top: 333px;
				left: 178px;
			}
			#item8{
				top: 333px;
				left: 112px;
			}
			#item9{
				top: 293px;
				left: 60px;
			}
			#item10{
				top: 239px;
				left: 29px;
			}
			#item11{
				top: 174px;
				left: 29px;
			}
			#item12{
				top: 110px;
				left: 43px;
			}
			#item13{
				top: 64px;
				left: 90px;
			}
		</style>
	</head>
	<body>
		
		<div class="box">
			<div class="item" id="item1"></div>
			<div class="item" id="item2"></div>
			<div class="item" id="item3"></div>
			<div class="item" id="item4"></div>
			<div class="item" id="item5"></div>
			<div class="item" id="item6"></div>
			<div class="item" id="item7"></div>
			<div class="item" id="item8"></div>
			<div class="item" id="item9"></div>
			<div class="item" id="item10"></div>
			<div class="item" id="item11"></div>
			<div class="item" id="item12"></div>
			<div class="item" id="item13"></div>
			<div class="item" id="item14"></div>
			<div class="item" id="item15"></div>
			<div class="item" id="item16"></div>
			<div class="item" id="item17"></div>
			<div class="item" id="item18"></div>
			<div class="item" id="item19"></div>
			<div class="item" id="item20"></div>
			<div class="disktop" id="disktop"></div>
		</div>
	</body>
</html>
